<template>
  <div id="app">
    <h1 class="title">SSE 演示应用</h1>
    
    <div class="section-title">标准 SSE 连接 (/api/sse/stream)</div>
    <div class="counters-container">
      <div v-for="(number, index) in numbers" 
           :key="'standard-'+index" 
           class="counter-box">
        <div class="counter-label">计数器 {{index + 1}}</div>
        <div class="counter-value">{{number}}</div>
      </div>
    </div>

    <div class="section-title">增强 SSE 连接 (/api/sse/stream2)</div>
    <div class="enhanced-counter">
      <div class="counter-box enhanced single">
        <div class="counter-label">增强计数器</div>
        <div class="counter-value">{{enhancedMessage}}</div>
      </div>
    </div>

    <div class="connection-status">
      <div :class="['status-indicator', standardConnected ? 'connected' : 'disconnected']"></div>
      <span>标准连接状态: {{ standardConnected ? '已连接' : '断开' }}</span>
      
      <div :class="['status-indicator', enhancedConnected ? 'connected' : 'disconnected']"></div>
      <span>增强连接状态: {{ enhancedConnected ? '已连接' : '断开' }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      numbers: Array(5).fill(0),  // 初始化5个计数器的值
      enhancedMessage: '等待数据...',  // 增强SSE的消息内容
      eventSource: null,
      enhancedEventSource: null,
      standardConnected: false,
      enhancedConnected: false
    }
  },
  mounted() {
    console.log('App mounted, connecting to SSE...');
    setTimeout(() => {
      this.connectSSE();
      this.connectEnhancedSSE();
    }, 1000);
  },
  beforeDestroy() {
    if (this.eventSource) {
      this.eventSource.close()
    }
    if (this.enhancedEventSource) {
      this.enhancedEventSource.close()
    }
  },
  methods: {
    connectSSE() {
      console.log('Connecting to standard SSE endpoint...');
      if (this.eventSource) {
        this.eventSource.close();
      }
      
      this.eventSource = new EventSource('http://localhost:8080/api/sse/stream');
      
      this.eventSource.onopen = () => {
        console.log('Standard SSE connection opened');
        this.standardConnected = true;
      };
      
      this.eventSource.onmessage = (event) => {
        console.log('Received standard SSE message:', event.data);
        try {
          const message = JSON.parse(event.data);
          if (message && typeof message.counterId !== 'undefined') {
            console.log(`Updating standard counter ${message.counterId} with value ${message.content}`);
            this.$set(this.numbers, message.counterId, parseInt(message.content));
          }
        } catch (e) {
          console.error('Error parsing standard SSE message:', e);
        }
      };

      this.eventSource.onerror = (error) => {
        console.error('Standard SSE Error:', error);
        this.standardConnected = false;
        this.eventSource.close();
        setTimeout(() => this.connectSSE(), 5000); // 重连
      };
    },
    
    connectEnhancedSSE() {
      console.log('Connecting to enhanced SSE endpoint...');
      if (this.enhancedEventSource) {
        this.enhancedEventSource.close();
      }
      
      this.enhancedEventSource = new EventSource('http://localhost:8080/api/sse/stream2');
      
      this.enhancedEventSource.onopen = () => {
        console.log('Enhanced SSE connection opened');
        this.enhancedConnected = true;
      };
      
      this.enhancedEventSource.onmessage = (event) => {
        console.log('Received enhanced SSE message:', event.data);
        try {
          const message = JSON.parse(event.data);
          if (message && message.content) {
            console.log(`Updating enhanced counter with value: ${message.content}`);
            this.enhancedMessage = message.content;
          }
        } catch (e) {
          console.error('解析增强SSE数据失败:', e, event.data);
        }
      };

      this.enhancedEventSource.onerror = (error) => {
        console.error('Enhanced SSE Error:', error);
        this.enhancedConnected = false;
        this.enhancedEventSource.close();
        setTimeout(() => this.connectEnhancedSSE(), 5000); // 重连
      };
    }
  }
}
</script>

<style>
#app {
  width: 100vw;
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.title {
  font-size: 32px;
  color: #303133;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  color: #606266;
  margin: 20px 0;
  text-align: center;
}

.counters-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  justify-content: center;
  margin-bottom: 30px;
}

.enhanced-counter {
  padding: 20px;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.counter-box {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  width: 200px;
  height: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.counter-box.single {
  width: 300px;
  height: 250px;
}

.counter-box:hover {
  transform: translateY(-5px);
}

.counter-box.enhanced {
  background-color: #ecf5ff;
  border: 2px solid #409EFF;
}

.counter-label {
  font-size: 20px;
  color: #409EFF;
  margin-bottom: 20px;
  text-align: center;
}

.counter-value {
  font-size: 28px;
  font-weight: bold;
  color: #2c3e50;
  font-family: 'Monaco', monospace;
  text-align: center;
  word-break: break-word;
  max-width: 100%;
}

.connection-status {
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
}

.status-indicator.connected {
  background-color: #67C23A;
}

.status-indicator.disconnected {
  background-color: #F56C6C;
}

/* 重置默认样式 */
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}
</style> 